<div style="text-align:center;">
<div id="ecard_frame2" style="display:inline-block;vertical-align:top;">
	<canvas id="c" width="720" height="480"  >
		Sorry, your web browser does not support Canvas content.
	</canvas>
	<div class="clear"></div>
	<div class="center" style="margin-top:30px;">
		<a href="<?php echo site_url("personalize");?>" id="btn_personalize" class="link_btn">Add New</a>
		<a href="<?php echo site_url("done");?>" id="btn_personalize" class="link_btn" style="margin-left:200px;">Done</a>
	</div>
</div>
<div id="photos_div" style="display:inline-block;vertical-align:top;margin-top:15px; max-width:450px; position:relative; z-index: 12;">
<?php
foreach($photos as $photo)
{
	echo '<div class="edited_photo_div"><img class="edited_photo" width="150" src="'.base_url("content/uploads/".$photo['photo_file']).'" rel="'.$photo['id'].'" ></div>';
}
?>
</div>
</div>

<script>
var base_url = "<?php echo base_url();?>";
var added_objs = [];

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

var canvas = new fabric.Canvas('c');
canvas.backgroundImageOpacity= 0.1;
canvas.setBackgroundImage(base_url + 'content/images/Sunset.jpg');




fabric.Image.fromURL(base_url + 'content/images/blue.png', function(frame1) {	
	frame1.set({left: 140, top: 200, angle: 0 }).scale(0.75);
	frame1.selectable = false;
	canvas.add(frame1);

	fabric.Image.fromURL(base_url + 'content/images/red.png', function(frame2) {	
		frame2.set({ left: 370, top: 200, angle: 0 }).scale(0.75);
		frame2.selectable = false;
		canvas.add(frame2);

		fabric.Image.fromURL(base_url + 'content/images/green.png', function(frame3) {	
			frame3.set({ left: 575, top: 245, angle: 0 }).scale(0.75);
			frame3.selectable = false;
			canvas.add(frame3);

			fabric.Image.fromURL(base_url + 'content/images/delete.png', function(delete_img1) {	
				delete_img1.set({ left: 205, top: 75, angle: 0 });
				delete_img1.selectable = false;
				canvas.add(delete_img1);
			});

			fabric.Image.fromURL(base_url + 'content/images/delete.png', function(delete_img2) {	
				delete_img2.set({ left: 450, top: 75, angle: 0 });
				delete_img2.selectable = false;
				canvas.add(delete_img2);
			});

			fabric.Image.fromURL(base_url + 'content/images/delete.png', function(delete_img3) {	
				delete_img3.set({ left: 690, top: 75, angle: 0 });
				delete_img3.selectable = false;
				canvas.add(delete_img3);
			});
		});
	});
});

$(".edited_photo").draggable({
	helper: "clone",
	drag: function(e,ui){
		//console.log(e);
		var client_x = e.clientX;
		var client_y = e.clientY;
		var position = $("#c").offset();
		var px = client_x - position.left;
		var py = client_y - position.top;
		if ( px > 0 && px < canvas.getWidth() && py > 0 && py < canvas.getHeight() )
		{
			canvas.forEachObject(function(obj){
				var width = obj.width * 0.32;
				var left = obj.left - width/2;
				var height = obj.height * 0.32;
				var top = obj.top - height/2;
				
				if ( px > left && px < (left + width) && py > top && py < (top + height) )
				{
					obj.setOpacity(0.5);
				}
				else
				{
					obj.setOpacity(1);
				}

			});
			canvas.renderAll();
		}
	},
	stop: function(e,ui){
		var self = this;
		var client_x = e.clientX;
		var client_y = e.clientY;
		var position = $("#c").offset();
		var px = client_x - position.left;
		var py = client_y - position.top;
		if ( px > 0 && px < canvas.getWidth() && py > 0 && py < canvas.getHeight() )
		{
			canvas.forEachObject(function(obj){
				var width = obj.width * 0.32;
				var left = obj.left - width/2;
				var height = obj.height * 0.32;
				var top = obj.top - height/2;
				
				if ( px > left && px < (left + width) && py > top && py < (top + height) )
				{
					var src = $(e.target).attr('src');
					fabric.Image.fromURL(src, function(photo_img) {
						photo_img.set({ left: obj.getLeft(), top: obj.getTop(), angle: 0 }).scale(0.78);
						photo_img.selectable = false;
						canvas.add(photo_img);
						//obj.bringToFront();
					});
				}
				obj.setOpacity(1);
			});
			canvas.renderAll();
		}
	}
});

</script>